<template>
  <div class="body">
    <div class="movie-container">
      <label>Pick a seat</label>
<!--      <select id="movie">-->
<!--        <option value="10">Avengers: Endgame ($10)</option>-->
<!--        <option value="12">Joker ($12)</option>-->
<!--        <option value="8">Toy Story 4 ($8)</option>-->
<!--        <option value="9">The Lion King ($9)</option>-->
<!--      </select>-->
    </div>

    <ul class="showcase">
      <li>
        <div class="seat"></div>
        <small>Available</small>
      </li>
      <li>
        <div class="seat selected"></div>
        <small>Selected</small>
      </li>
      <li>
        <div class="seat occupied"></div>
        <small>Occupied</small>
      </li>
      <li>
        <div class="seat Purchased"></div>
        <small>Purchased</small>
      </li>
    </ul>


    <div class="container">
      <img class="screen" src="http://movie.chenyangdu.xyz:8081/image/movie?id=h_5">

      <div class="row" v-for="(o, x) in origin">
        <div :class="{'seat': true, 'occupied':isOccupied(r), 'selected':isSelected(x, index), 'Purchased':isPurchased(r)}"
             v-for="(r,index) in o"
             @click="addSelected(x, index)"
        ></div>
      </div>
    </div>
    <a class="buynow" @click="submitSeats()">购 票</a>
    <p class="text">
      You have selected <span id="count">0</span> seats for a price of $<span
        id="total"
    >0</span
    >
    </p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ticket",
  data(){
    return{
      user:'',
      origin:[[0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
      ],
      selected:[[0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
      ],
      seats:JSON.parse(this.$route.query.seats),
    }
  },
  methods:{
    isSelected(x, index){
      return this.selected[x][index];
    },
    isOccupied(r){
      return r === 1;
    },
    isPurchased(r){
      return r === 2;
    },
    addSelected(x, index){
      console.log(x)
      if (this.selected[x][index] === 0 && this.origin[x][index] === 0){
        this.selected[x][index] = 1;
      } else {
        this.selected[x][index] = 0;
      }
    },
    submitSeats(){
      let k = 0
      for (let i = 0; i < 6; i ++){
        for (let j = 0; j < 8; j++) {
          if (this.selected[i][j] === 1){
            this.seats.push({x:i, y:j, user_id:this.user.id});
            k++;
          }
        }
      }
      if (k === 0){
        this.$router.go(-1);
        return;
      }
      console.log(this.seats)
      console.log(JSON.stringify(this.seats))
      console.log('[{"x":0,+"y":1,+"user_id":2}]')
      console.log(this.$route.query.session_id)
      let _this = this;
      axios.post("/movie/updateSeats",{
        id:_this.$route.query.session_id,
        seats:JSON.stringify(_this.seats),
      }).then((r)=>{
        this.$router.go(-1);
      })
    }
  },
  computed:{

  },
  created() {
    console.log(this.seats[0])
    console.log(this.$route.query.session_id)
    this.user = JSON.parse(localStorage.getItem("user"));
    console.log('88',this.user.id)
    // this.test[4][1] = 1;
    for (let i = 0; i < this.seats.length; i ++) {
      console.log(this.seats[i].x, this.seats[i].y, this.seats[i].user_id)
      if (this.seats[i].user_id === this.user.id){
        this.origin[this.seats[i].x][this.seats[i].y] = 2;
      } else {
        this.origin[this.seats[i].x][this.seats[i].y] = 1;
      }
    }
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.body {
  background-color: #242333;
  color: #fff;
  display: flex;
  position: fixed;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110%;
  font-family: 'Lato', sans-serif;
  top: -60px;
  left: 0;
  //margin: -10px;
}

.movie-container {
  margin: 20px 0;
}

.movie-container select {
  background-color: #fff;
  border: 0;
  border-radius: 5px;
  font-size: 14px;
  margin-left: 10px;
  padding: 5px 15px 5px 15px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.container {
  perspective: 500px;
  margin-bottom: 30px;
  width: 40%;
  height: 50%;
}

.seat {
  background-color: #444451;
  height: 36px;
  width: 45px;
  margin: 6px;
  //left: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.seat.selected {
  background-color: #6feaf6;
}

.seat.occupied {
  background-color: #fff;
}

.seat.Purchased {
  background-color: #42b983;
}

.seat:nth-of-type(2) {
  margin-right: 50px;
}

.seat:nth-last-of-type(2) {
  margin-left: 50px;
}

.seat:not(.occupied):hover {
  cursor: pointer;
  transform: scale(1.2);
}

.showcase .seat:not(.occupied):hover {
  cursor: default;
  transform: scale(1);
}

.showcase {
  background: rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  border-radius: 5px;
  color: #777;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

.showcase li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.showcase li small {
  margin-left: 2px;
}

.row {
  display: flex;
  position: relative;
  left: 12%;
}

.screen {
  background-color: #fff;
  height: 140px;
  width: 100%;
  margin: 15px 0;
  transform: rotateX(-45deg);
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}

p.text {
  margin: 5px 0;
}

p.text span {
  color: #6feaf6;
}

.buynow {
  max-width: 160px;
  width: 100%;
  padding: 15px 0px;
  font-size: 20px;
  line-height: 20px;
  font-weight: 500;
  background: #3b5998;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: -50px;
  margin-bottom: 30px;
  transition: all .4s ease-in;
  text-decoration: none;
}

.buynow:hover {
  background: purple;
  color: #fff;
  transition: all .4s ease-in;
  border-radius: 30px;
  cursor:pointer
}

</style>